vue-router路由模式有几种,它们有什么区别??

标签:2024-05-19 12:03:38

VueRouter的路由模式有三种:hash模式、history模式和abstract模式。

1:Hash 模式(默认):

在URL中的路径部分以 # 符号开头。

比如:http://www.xxx.com/#/home。

在hash模式下,URL的hash部分的改变不会导致浏览器向服务器发送请求,可以通过监听hashchange事件来触发相应的路由变化。

2:History 模式:

通过使用HTML5的pushState和replaceState方法来改变URL,不再使用hash作为URL的一部分。

比如:http://www.xxx.com/home。

在history模式下,URL的改变会导致浏览器向服务器发送请求,因此需要服务器的支持来处理这些URL。

3:Abstract 模式:

在无法使用浏览器的history模式和hash模式时,可以选择使用abstract模式。在abstract模式下,只会改变应用的内存状态,并不会改变URL。这种模式适合于在非浏览器环境中使用VueRouter,比如在Node.js中渲染Vue应用。

路由配置

const router = new VueRouter({
  mode: 'history', // 使用 History 模式
  routes: [...]
})

### Vue Router 的路由模式有什么区别?

|区别|Hash 模式|History 模式|Abstract 模式|
|-|-|-|
|URL 格式|URL 中带有 # 符号和哈希值,例如 http://xxxx.com/#/path。|URL 没有 # 符号,直接使用正常的 URL 地址,例如 http://xxxx.com/path。|不进行 URL 处理,路由信息保存在内存中,适用于非浏览器环境。|
|浏览器行为|URL 的哈希值发生变化时,浏览器会触发 hashchange 事件,Vue Router 监听该事件来进行路由导航,不会向服务器发送请求。|URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置相应的路由规则来正确响应路由。|不涉及浏览器行为,路由信息保存在内存中,适用于非浏览器环境。|
|刷新页面|刷新页面时,URL 中的哈希值不会被发送到服务器,仍然停留在前端,因此前端能够通过哈希值来恢复应用的状态。|刷新页面时,URL 将被发送到服务器,服务器需要配置相应的路由规则来正确响应路由,否则会导致 404 错误。|不涉及浏览器行为,无论如何刷新页面都不会发送请求到服务器。|
|服务器配置|不需要特殊的服务器配置,因为哈希值不会发送到服务器。|需要服务器配置来支持路由的正常工作,主要是为了在刷新页面或直接访问 URL 时能正确响应路由。|不涉及服务器配置,适用于非浏览器环境。|
原文出处:http://www.dongblog.com/notes/87.html
来源:博客网 转载请注明出处!

活跃用户

41b
Ta还没有签名
莓果布丁
Ta还没有签名
技术性装怪
Ta还没有签名
余家贫
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093